<!DOCTYPE html>
<html>
<head>
    <title>文章混淆</title>
    <#include "../../include/head-file.ftl">

</head>
<body>
<div id="main" class="ms-index" v-cloak>
    <ms-search ref="search" @search="search" :condition-data="conditionList" :conditions="conditions"></ms-search>
    <el-header class="ms-header" height="50px">
        <el-col :span="12">
            <@shiro.hasPermission name="cms:contentshuffle:save">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="save()">新增标题</el-button>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="cms:contentshuffle:del">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(selectionList)"  :disabled="!selectionList.length">删除标题</el-button>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="cms:contentshuffle:savehead">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="savehead()">新增首段</el-button>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="cms:contentshuffle:savebody">
                <el-button type="success" icon="el-icon-plus" size="mini" @click="savebody()">新增中段</el-button>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="cms:contentshuffle:saveend">
                <el-button type="warning" icon="el-icon-plus" size="mini" @click="saveend()">新增尾段</el-button>
            </@shiro.hasPermission>
        </el-col>
    </el-header>
    <div class="ms-search">
        <el-row>
            <el-form :model="form"  ref="searchForm"  label-width="120px" size="mini">
                <el-row>
                    <el-col :span="8">
                        <el-form-item  label="文章标题" prop="title">
                            <el-input v-model="form.title"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入文章标题">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3" style="text-align: right;padding-right: 10px;">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="form.sqlWhere=null;currentPage=1;list()">查询</el-button>
                        <el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item  label="首段数:">
                        	<el-tag >{{heads}}</el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item  label="中段数:">
                       	 <el-tag type="success">{{bodys}}</label>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item  label="尾段数:">
                       	 <el-tag type="warning">{{ends}}</label>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item  label="图片数:">
                       	 <el-tag type="danger">{{imgs}}</label>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row>
                	<el-col :span="10">
                        <el-form-item  label="图片存放路径:">
                       	 <el-tag type="danger">{{imgDir}}</label>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
    </div>
    <el-main class="ms-container">
        <el-table height="calc(100vh - 68px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <template slot="empty">
                {{emptyText}}
            </template>
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="编号" width="200" prop="id">
            </el-table-column>
            <el-table-column label="文章标题" align="left" prop="title" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="所属栏目" align="left" prop="catTitle" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="发布时间" align="center" prop="createTime" :formatter="dateFormat" width="200">
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <@shiro.hasPermission name="cms:contentshuffle:del">
                        <el-link type="primary" :underline="false" @click="del([scope.row])">删除</el-link>
                    </@shiro.hasPermission>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                :page-sizes="[10,20,30,40,50,100]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                class="ms-pagination"
                @current-change='currentChange'
                @size-change="sizeChange">
        </el-pagination>
    </el-main>
</div>
</body>

</html>
<script>
    var indexVue = new Vue({
        el: '#main',
        data: {
        	conditionList: [{
                action: 'and',
                field: 'content_title',
                el: 'eq',
                model: 'contentTitle',
                name: '文章标题',
                type: 'input'
            }],
            bodys:0,
            heads:0,
            ends:0,
            imgs:0,
            imgDir:'',
            conditions: [],
            contentCategoryIdOptions: [],
            dataList: [],
            //文章列表
            selectionList: [],
            //文章列表选中
            total: 0,
            //总记录数量
            pageSize: 10,
            //页面数量
            currentPage: 1,
            //初始页
            manager: ms.manager,
            loadState: false,
            loading: true,
            //加载状态
            emptyText: '',
            //提示文字
            contentTypeOptions: [],
            contentDisplayOptions: [{
                "value": "0",
                "label": "是"
            }, {
                "value": "1",
                "label": "否"
            }],
            //搜索表单
            form: {
                sqlWhere: null,
                // 文章标题
                contentTitle: null,
                // 文章类型
                contentType: null,
                categoryId: ''
            }
        },
        methods: {
            //查询列表
            list: function () {
                var that = this;
                that.loading = true;
                that.loadState = false;
                var page = {
                    pageNo: that.currentPage,
                    pageSize: that.pageSize
                };
                var form = JSON.parse(JSON.stringify(that.form));

             

                for (var key in form) {
                    if (!form[key]) {
                        delete form[key];
                    }
                }

                history.replaceState({
                    form: form,
                    page: page
                }, "");
                //筛选栏目类型，1=列表
               
                ms.http.post(ms.manager + "/cms/contentShuffle/list.do", form.sqlWhere ? Object.assign({}, {
                    sqlWhere: form.sqlWhere
                }, page) : Object.assign({}, that.form, page)).then(function (res) {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }

                    if (!res.result || res.data.total <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList = [];
                        that.total = 0;
                    } else {
                        that.emptyText = '';
                        that.total = res.data.total;
                        that.dataList = res.data.rows;
                    }
                    that.bodys=res.bodys;
                    that.heads=res.heads;
                    that.ends=res.ends;
                    that.imgs=res.imgCount;
                    that.imgDir=res.imgDir;
                }).catch(function (err) {
                    that.loading = false;
                    console.log(err);
                });
                setTimeout(function () {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }
                }, 500);
            },
            //文章列表选中
            handleSelectionChange: function (val) {
                this.selectionList = val;
            },
            //删除
            del: function (row) {
                var that = this;
                that.$confirm('此操作将永久删除所选内容, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                	if(!row.length){
                		that.$notify({
                            title: '失败',
                            message: '请选择数据',
                            type: 'warning'
                        });
                	}
                	var ids = []
                	for(r in row){
                		ids.push(row[r].id)
                	}
                    ms.http.post(ms.manager + "/cms/contentShuffle/delete.do", ids, {
                    }).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                type: 'success',
                                message: '删除成功!'
                            }); //删除成功，刷新列表

                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {
                    that.$notify({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            save: function (id) {
                //id有值时编辑
                location.href = this.manager + "/cms/contentShuffle/form.do?id=" + id;
            },
            savehead: function (id) {
                //id有值时编辑
                location.href = this.manager + "/cms/contentShuffle/formhead.do?id=" + id;
            },
            savebody: function (id) {
                //id有值时编辑
                location.href = this.manager + "/cms/contentShuffle/formbody.do?id=" + id;
            },
            saveend: function (id) {
                //id有值时编辑
                location.href = this.manager + "/cms/contentShuffle/formfoot.do?id=" + id;
            },
            
            //表格数据转换
            contentCategoryIdFormat: function (row, column, cellValue, index) {
                var value = "";

                if (cellValue) {
                    var data = this.contentCategoryIdOptions.find(function (value) {
                        return value.id == cellValue;
                    });

                    if (data && data.categoryTitle) {
                        value = data.categoryTitle;
                    }
                }

                return value;
            },
            dateFormat: function (row, column, cellValue, index) {
                if (cellValue) {
                    return ms.util.date.fmt(cellValue, 'yyyy-MM-dd hh:mm:ss');
                } else {
                    return '';
                }
            },
            contentDisplayFormat: function (row, column, cellValue, index) {
                var value = "";

                if (cellValue) {
                    var data = this.contentDisplayOptions.find(function (value) {
                        return value.value == cellValue;
                    });

                    if (data && data.label) {
                        value = data.label;
                    }
                }

                return value;
            },
            //pageSize改变时会触发
            sizeChange: function (pagesize) {
                this.loading = true;
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange: function (currentPage) {
                this.loading = true;
                this.currentPage = currentPage;
                this.list();
            },
            search: function (data) {
                this.form.sqlWhere = JSON.stringify(data);
                this.list();
            },
            //重置表单
            rest: function () {
                this.form.sqlWhere = null;
                this.$refs.searchForm.resetFields();
                this.list();
            },
            
        },
        mounted: function () {
            this.list();
        }
    });
</script>
<style>
    #main .ms-search {
        padding: 20px 0 0;
    }
    #main .ms-container {
        height: calc(100vh - 141px);
    }
    body{
        overflow: hidden;
    }
</style>
